<!--
 * @Author: denghuan
 * @LastEditors: denghuan
 * @LastEditTime: 2022-11-23 12:47:02
 * @Description: h5播放器
-->
<template>
  <div class="video">
    <div
      :id="sid"
      :style="`width:${width};height:${height}`"
      class="videoPlayer"
    />
    <el-select
      v-model="selCamera"
      class="sel"
      :popper-append-to-body="false"
      @change="changeCamera"
    >
      <el-option
        v-for="(item, index) in camerList"
        :key="index"
        :label="item.name"
        :value="item.indexCode"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
import { getCameraWsUrl } from '@/api/index.js'
let h5Plugin = null
export default {
  name: 'MultiplePlayer',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    camerList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      sid: Math.floor(Math.random() * 100000000000000),
      selCamera: '',
      url: ''
    }
  },
  computed: {
    protocol () {
      // return 'wss'
      return window.location.protocol === 'https:' ? 'wss' : 'ws'
    }
  },
  watch: {
    camerList: function (newV) {
      if (newV && newV.length) {
        this.selCamera = newV[0].indexCode
        this.play()
      }
    }
  },
  mounted () {
    if (this.camerList && this.camerList.length) {
      this.selCamera = this.camerList[0].indexCode
    }
    this.$nextTick(() => {
      this.initPlugin()
      this.getCameraWsUrl()
      // this.play()
    })
  },
  beforeUnmount () {
    this.stopPlay()
    h5Plugin = null
  },
  methods: {
    getCameraWsUrl () {
      getCameraWsUrl(this.selCamera).then(res => {
        this.url = res?.data || ''
        this.play()
      })
    },
    changeCamera () {
      this.stopPlay()
      this.getCameraWsUrl()
    },
    initPlugin () {
      console.log(`/${process.env.VUE_APP_CONTEXT}/static/h5player/`);
      h5Plugin = new JSPlugin({ // eslint-disable-line
        szId: this.sid,
        iMaxSplit: 1,
        iCurrentSplit: 1,
        // szBasePath: '/static/h5player/',
        szBasePath: `/${process.env.VUE_APP_CONTEXT}/static/h5player/`,
        oStyle: {
          border: 'transparent',
          borderSelect: 'transparent'
        }
      })
    },
    async play () {
      // if (!this.indexcode) {
      //   return
      // }
      if (!h5Plugin) {
        this.initPlugin()
      }
      // const { data: playURL } = await getPreviewUrl({
      //   indexCode: this.indexcode,
      //   // indexcode: 'e8eb709323d74b97b2397202c0077bf5',
      //   protocol: this.protocol
      // })
      // const playURL = 'ws://10.19.189.245:559/mgc/realplay/10.19.189.245:655/dac/realplay/602ec12a1a9c4d4eaeef2353c7e8c563/MAIN/TCP?streamform=ps&transcode=2'
      const playURL = this.url
      console.log('playURL', playURL)
      // 高级模式采用的是软解，用的是海康播放库，所以在性能上远低于普通模式，但是在功能上较丰富，可扩展性强。
      // 普通模式采用的是硬解，用的是浏览器的video标签播放，所以性能上远高于高级模式，但是有较大局限性，只支持h264，并且功能单一。
      h5Plugin.JS_Play(
        playURL,
        {
          playURL,
          mode: 0 // 解码类型：0=普通模式; 1=高级模式
        },
        0 // 当前窗口下标
      ).then(
        () => { console.info('JS_Play success') },
        err => { console.info('JS_Play failed:', err) }
      )
    },
    stopPlay () {
      h5Plugin.JS_Stop(0).then(
        () => { console.info('JS_Stop success') },
        err => { console.info('JS_Stop failed:', err) }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.video {
  width: 100%;
  height: 100%;
  position: relative;
  .videoPlayer {
    width: 100%;
    height: 100%;
  }
  .sel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
  }
}
</style>
